<template>
  <el-drawer v-model="props.show" direction="rtl" @close="closeFun">
    <template #header>
      <div class="titleNmae">{{ props.goodData.subjectTrans }}</div>
    </template>
    <template #default>
      <div class="order">
        <div class="typePriceList">
          <div class="subheading">Цена до отгрузки</div>
          <div class="typePriceListUl">
            <div class="typePriceListItem" v-for="(item,index) of state.wholesaleList" :key='index'>
              <div class="typeTitle">{{ item.startQuantityStr }}</div>
              <div class="typePrice">{{ item.priceRuble }}</div>
            </div>
          </div>
        </div>
        <div class="typePriceImgList">
          <div class="subheading">{{ state.firstSpecificationName }}</div>
          <div class="typePriceImgListUL">
            <div class="imgBox" v-for="(item,index) of state.goodTypeData.list"
                 :class="[inspect(item) ? 'imgBox_selectState':'imgBox',index === state.typeSelectItemIndex ? 'imgBox_action':'imgBox']"
                 @click="selectAProductFun(item,index)"
            >
              <img :src="item.skuImageUrl" alt="">
            </div>
          </div>
        </div>
        <div class="typeNumberList">
          <div class="title">Размер：</div>
          <div class="typeNumberListUl">
            <div class="typeNumberItem" v-for="(item,index) of state.typeSelectItemChild" :key='index'>
              <div class="typeItemBox multi-line-omit"
                   :class="item.quantity > 0 ? 'typeItemBox_selectState':'typeItemBox'"
              >{{ item.valueTrans }}</div>
              <div class="numberItemBox">
                <el-input-number v-model="item.quantity" :min="0" @change="handleChange(item)"/>
              </div>
            </div>
          </div>
        </div>
        <div class="logistics" style="padding-top: 20px">
          <div class="messageList">
            <div class="messageItem">
              <div class="leftText">Всего товаров <span style="color: #F83C57">({{ state.totalityMain }} товара)</span>：</div>
              <div class="rightText">RUB {{ state.totalPriceMain }}</div>
            </div>
          </div>
<!--          <div class="messageList">-->
<!--            <div class="messageItem">-->
<!--              <div class="leftText">Итого, расходы на перевозку：</div>-->
<!--              <div class="rightText">RUB {{ state.totalPriceMain }}</div>-->
<!--            </div>-->
<!--          </div>-->
        </div>
        <div class="btnList">
          <div class="buyBtn shiyongBtn" @click="initiateOrderFun('1')">Купить сразу</div>
          <div class="shopping shiyongBtn" @click="initiateOrderFun('2')">Заказать</div>
        </div>
      </div>
    </template>
  </el-drawer>

</template>
<script setup lang="ts">
import {reactive, defineProps, watch,defineEmits} from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
import {getGoodsSkuAttribute, getGoodsSkuAttributeRaw} from "@/api/api.ts";
const emits = defineEmits(['close'])
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  goodData:{
    type: Object,
    default() {
      return {}
    }
  },
  typeGoodData:{
    type: Object,
    default() {
      return {}
    }
  },
})
const state = reactive({
  wholesaleList:[],
  firstSpecificationName:'',
  goodTypeData:{},
  tagList:[],
  typeSelectItemObj:{},
  typeSelectItemName:'',
  typeSelectItemChild:[],
  childIndex:0,
  typeSelectItemIndex:0,
  totalityMain:0,
  totalPriceMain:0
})


//走规格数据
watch(() => props.typeGoodData, () => {
  state.goodTypeData = props.typeGoodData
  state.tagList = props.goodData.serverTransList
  state.firstSpecificationName = props.typeGoodData.list[0].attributeNameTrans
  state.typeSelectItemObj = props.typeGoodData.list[0]
  state.typeSelectItemName = props.typeGoodData.list[0].valueTrans
  if (state.goodTypeData.haveChild === 1) {
    state.typeSelectItemChild = props.typeGoodData.list[0].child
  } else {
    state.typeSelectItemChild = props.typeGoodData.list
  }
  state.wholesaleList = addQuantityRangeField(props.goodData.productSaleInfo.priceRangeList)
})

//探查子集是否有选中
const inspect = (item: object) => {
  let isSelect = false
  if (item.child){
    item.child.forEach((itemChild: any) => {
      if (itemChild.quantity > 0) {
        isSelect = true
      }
    })
  }

  return isSelect
}
const handleChange = (item:object) => {
  getGoodsSkuAttributeRaw({
    offerId:item.offerId,
    cargoParamList:JSON.stringify([{
      specId:item.specId,
      quantity:item.quantity,
      offerId:item.offerId,
    }])
  }).then(res => {
    console.log(res)
    if (res.errCode === 0) {
      state.totalPriceMain = res.returnData.priceRuble
      state.totalityMain = res.returnData.quantity
    }
  })
}
const selectAProductFun = (item: object, index: number) => {
  state.childIndex = 0
  state.typeSelectItemIndex = index
  state.typeSelectItemName = item.valueTrans
  state.typeSelectItemObj = item
  if (state.goodTypeData.haveChild === 1) {
    state.typeSelectItemChild = item.child
  } else {

  }
}
const addQuantityRangeField = (data: any) => {
  return data.map((item: any, index: any, array: any) => {
    const nextItem = array[index + 1];
    const start = item.startQuantity;
    const end = nextItem ? nextItem.startQuantity - 1 : '↑';
    item.startQuantityStr = `${start}-${end}`;
    return item;
  });
};
const closeFun = () => {
  emits('close', false)
}

/**
 * 弃用的方法，但是有用
 */
//本地计算数量和价格
const handleChange_BD = () => {
  let totalityMain = 0
  let totalPriceMain = 0
  if (state.goodTypeData.haveChild === 1) {  // 有子规格计算
    state.goodTypeData.list.forEach((item: any) => {
      let totality = 0
      let totalPrice = 0
      item.child.forEach((itemChild: any) => {
        if(itemChild.goodQuantity > 0){
          totality += itemChild.goodQuantity
          totalPrice += itemChild.priceRatio * itemChild.goodQuantity
          itemChild.selectState = true
        } else {
          itemChild.selectState = false
        }
      })
      item.totalityVue = totality
      item.totalPriceVue = totalPrice
      if(item.totalityVue > 0 || item.totalPriceVue > 0){
        item.selectState = true
        totalPriceMain += item.totalPriceVue
        totalityMain += item.totalityVue
      } else {
        item.selectState = false
      }
    })
  } else { // 无子规格计算

  }
  console.log(totalityMain,totalPriceMain)
  state.totalityMain = totalityMain
  state.totalPriceMain = Number(totalPriceMain.toFixed(2));
  // console.log(state.goodTypeData)
}
const addQuantityTypeSelectItemChildMonopole = (indexMain:number) => {
  return state.goodTypeData.list.map((item: any, index: any, array: any) => {
    if(!item.goodQuantity) item.goodQuantity = 0
    return item
  })
}
const addQuantityTypeSelectItemChild = (list:any) => {
  return list.map((item: any, index: any, array: any) => {
    if(!item.goodQuantity) item.goodQuantity = 0
    return item
  })
}
// 走详情数据
// watch(() => props.goodData, () => {
//   state.goodTypeData = props.goodData.attributeSkuInfos
//   state.goodTypeData = props.typeGoodData
//   state.tagList = props.goodData.serverTransList
//   state.firstSpecificationName = props.goodData.attributeSkuInfos.list[0].attributeNameTrans
//   state.typeSelectItemObj = props.goodData.attributeSkuInfos.list[0]
//   state.typeSelectItemName = props.goodData.attributeSkuInfos.list[0].valueTrans
//   if (state.goodTypeData.haveChild === 1) {
//     state.typeSelectItemChild = addQuantityTypeSelectItemChild(props.goodData.attributeSkuInfos.list[0].child)
//   } else {
//     state.typeSelectItemChild = addQuantityTypeSelectItemChildMonopole(0)
//   }
//   state.wholesaleList = addQuantityRangeField(props.goodData.productSaleInfo.priceRangeList)
// })
</script>
<style scoped lang="scss">
.btnList {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;

  .shiyongBtn {
    width: 48%;
    height: 48px;
    border-radius: 8px 8px 8px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .iconBtn {
    width: 48px;
    height: 48px;
    background: #FFFFFF;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #CCCCCC;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    img {
      width: 24px;
      height: 24px;
    }
  }

  .buyBtn {
    background: #0070E9;
    color: white;
  }

  .shopping {
    background: #F3F6F8;
  }
}
.multi-line-omit {
  word-break: break-all; // 允许单词内自动换行，如果一个单词很长的话
  text-overflow: ellipsis; // 溢出用省略号显示
  overflow: hidden; // 超出的文本隐藏
  display: -webkit-box; // 作为弹性伸缩盒子模型显示
  -webkit-line-clamp: 1; // 显示的行
  -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
}
:deep(.el-drawer__header){
  margin-bottom: 0 !important;
}
.titleNmae{
  font-family: Segoe UI, Segoe UI;
  font-weight: bold;
  font-size: 22px;
  color: #333333;
  line-height: 22px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  //margin-bottom: 30px;
}
.order{
  //height: 884px;
  overflow: auto;
  position: relative;
  .shanchu{
    position: absolute;
    top: -2px;
    right: 20px;
    cursor: pointer;
  }

  .typePriceList{
    padding-bottom: 8px;
    border-bottom: 1px solid #EEEEEE;
    .subheading{
      font-family: Segoe UI, Segoe UI;
      font-weight: bold;
      font-size: 16px;
      color: #333333;
      line-height: 16px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-bottom: 16px;
    }
    .typePriceListUl{
      display: flex;
      flex-wrap: wrap;
      .typePriceListItem{
        width: 23%;
        padding-bottom: 16px;
        .typeTitle{
          font-family: Segoe UI, Segoe UI;
          font-weight: 400;
          font-size: 16px;
          color: #999999;
          line-height: 16px;
          text-align: left;
          font-style: normal;
          text-transform: none;
          margin-bottom: 8px;
        }
        .typePrice{
          font-family: Segoe UI, Segoe UI;
          font-weight: bold;
          font-size: 24px;
          color: #333333;
          line-height: 24px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
    }
  }
  .typePriceImgList{
    margin-top: 20px;
    padding-bottom: 8px;
    border-bottom: 1px solid #EEEEEE;
    .subheading{
      font-family: Segoe UI, Segoe UI;
      font-weight: bold;
      font-size: 16px;
      color: #333333;
      line-height: 16px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-bottom: 16px;
    }
    .typePriceImgListUL{
      display: flex;
      flex-wrap: wrap;
      .imgBox{
        width: 94px;
        height: 94px;
        border-radius: 8px;
        margin-right: 9px;
        margin-bottom: 9px;
        overflow: hidden;
        cursor: pointer;
        box-sizing: border-box;
        img{
          width: 94px;
          height: 94px;
          border-radius: 8px;
        }
      }

      .imgBox_action {
        box-sizing: border-box;
        border: 2px solid #0070E9 !important;
      }
      .imgBox_selectState {
        box-sizing: border-box;
        border: 2px solid #08e900;
      }
    }
  }
  .typeNumberList{
    margin-top: 20px;
    padding-bottom: 8px;
    border-bottom: 1px solid #EEEEEE;
    .title{
      width: 73px;
      height: 16px;
      font-family: Segoe UI, Segoe UI;
      font-weight: bold;
      font-size: 16px;
      color: #333333;
      line-height: 16px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
    .typeNumberListUl{
      padding-bottom: 16px;
      .typeNumberItem{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 16px;
        .typeItemBox{
          padding: 8px 14px;
          width: 50%;
          background: #F6F6F6;
          //margin-top: 20px;
          border-radius: 4px 4px 4px 4px;
          border: 1px solid #999999;
          font-family: Segoe UI, Segoe UI;
          font-weight: 600;
          font-size: 14px;
          color: #333333;
          line-height: 25px;
          text-align: center;
          font-style: normal;
          text-transform: none;
          cursor: pointer;
        }
        .typeItemBox_selectState{
          background: #0070E9;
          color: white;
        }
      }
    }
  }
  .logistics{
    padding-bottom: 16px;
    border-bottom: 1px solid #EEEEEE;
    .title{
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      margin-bottom: 20px;
      .alt{
        font-family: Segoe UI, Segoe UI;
        font-weight: bold;
        font-size: 16px;
        color: #333333;
        line-height: 16px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
      .toFrom{
        font-family: Segoe UI, Segoe UI;
        font-weight: 600;
        font-size: 14px;
        color: #0070E9;
        line-height: 14px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }
    .messageList{
      .messageItem{
        margin-bottom: 16px;
        display: flex;
        justify-content: space-between;
        .leftText{
          font-family: Segoe UI, Segoe UI;
          font-weight: 600;
          font-size: 16px;
          color: #999999;
          line-height: 16px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
        .rightText{
          font-family: Segoe UI, Segoe UI;
          font-weight: 600;
          font-size: 16px;
          color: #333333;
          line-height: 16px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
    }
    .Tips{
      font-family: Segoe UI, Segoe UI;
      font-weight: 600;
      font-size: 16px;
      color: #F83C57;
      line-height: 16px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
}
</style>
